<!DOCTYPE html>
<html lang="zh-cmn-Hans" xmlns:th="http://www.thymeleaf.org">

<head th:replace="menu/import::semantic">
<meta charset="utf-8" />
<title>学习规划管理页面</title>
</head>
<body>
	<div class="ui column doubling stackable grid container"
		style="margin-top: 20px">
		<!-- 内容主体区域 -->
		<div class="ui main container">
			<form id="form" th:action="@{studyPlan}">
				<div style="float :left">
					<button class="ui red button" type="button" onclick="addDetail()">
						添加</button>
				</div>
				
				<div class="ui input" style="margin-left : 350px;float :left">
                   <input  type="text" name="studyName" id="studyName" th:value="${studyName}">
                </div>

				<div class="ui fluid search selection dropdown" style="width: 150px ; margin-left : 250px ;float :left">
					<input type="hidden" name="sort" th:value="${sort}">
					<div class="default text">--请选择--</div>
					<i class="dropdown icon"></i>
					<div class="menu">
						<div class="item" data-value="">--请选择--</div>
						<div class="item"
							th:each="sortEnum : ${T(com.ww.springboot.boot.model.StudyPlan.SortEnum).values()}"
							th:data-value="${sortEnum.value}" th:text="${sortEnum.text}"></div>
					</div>
				</div>
				<input type="text" name="way" id="way" style="display: none" />
				<div class="ui buttons" style="margin-left: 20px">
					<button class="ui button" type="button" onclick="sortT('0')">顺序</button>
					<div class="or"></div>
					<button class="ui positive button" type="button"
						onclick="sortT('1')">倒序</button>
				</div>

			</form>

			<div th:if="${studyPlans}"style="margin-top: 20px">
				<div th:each="studyPlan : ${studyPlans}" style="height: 120px">
					<div class="ui indicating progress" th:id="${studyPlan.studyName}"
						th:data-percent="${studyPlan.schedule}">
						<div class="bar"></div>

						<div class="label">
							<div class="ui compact menu">
								<a class="item">
									<button class="ui white button"
										th:text="${studyPlan.studyName}"
										th:onclick="detail([[${studyPlan.studyName}]])"></button>
									<div class="floating ui red label"
										th:text="${studyPlan.schedule}" />
								</a>
							</div>
						</div>
					</div>
					<div class="ignored" style="float :left;display: none" th:id = "${studyPlan.studyName}+'add'">
						<div class="ui icon buttons">
							<div class="medium ui basic green button icon">
								<i class="plus icon"
									th:onclick="update([[${studyPlan.studyName}]],1)"></i>
							</div>


						</div>
						<div class="ui icon buttons">

							<div class="big ui basic green button icon">
								<i class="plus icon"
									th:onclick="update([[${studyPlan.studyName}]],5)"></i>
							</div>

						</div>

						<div class="ui icon buttons">

							<div class="huge ui basic green button icon">
								<i class="plus icon"
									th:onclick="update([[${studyPlan.studyName}]],10)"></i>
							</div>

						</div>
					</div>
					<div class="ui icon buttons" style="float: right">

						<div class="huge ui basic green button icon">
							<i class="angle down icon" id="show_i"
							   th:onclick="hide([[${studyPlan.studyName}]])"></i>
						</div>

					</div>
				</div>
			</div>

			</div>
	</div>
</body>
<script type="text/javascript">
	$(function() {
		$(".ui.dropdown").dropdown();

		var aDiv = document.getElementsByClassName("ui indicating progress"); //获取文档中class为  ?? 的所有元素

		for (var i = 0; i < aDiv.length; i++) {
			$("#" + aDiv[i].id).progress();
		}
		var t = $('#studyName').val();
		$('#studyName').val("");
		$('#studyName').val(t);
		$('#studyName').focus();
	})

	function addDetail() {
		$.ajax({
			url : "studyPlan/createPre",
			type : "POST",
			cache : false,
			success : function(data) {
				layer.open({
					type : 1,
					title : '学习规划添加页面',
					skin : 'layui-layer-rim', //样式类名
					anim : 2,
					area : [ '600px', '300px' ], //宽高
					shadeClose : false, //开启遮罩关闭
					content : data
				});
			},
			error : function() {
				alert("error");
			}
		});
	}
	function update(studyName, schedule) {
		var flag = 0;
		if (confirm("是否记录此次学习内容？\n请确认！") == true) {
			flag = 1;
		}

		$.ajax({
			url : "studyPlan/update",
			type : "POST",
			cache : false,
			data : {
				studyName : studyName,
				schedule : schedule,
				flag : flag
			},
			success : function(data) {
				if (flag == 1) {
					layer.open({
						type : 1,
						title : '学习内容添加页面',
						skin : 'layui-layer-rim', //样式类名
						anim : 2,
						area : [ '1000px', '400px' ], //宽高
						shadeClose : false, //开启遮罩关闭
						content : data
					});
				} else {
					location.reload();
				}
			},
			error : function() {
				alert("error");
			}
		});
	}

	function detail(studyName) {
		$.ajax({
			url : "studyPlan/detail",
			type : "POST",
			cache : false,
			data : {
				studyName : studyName
			},
			success : function(data) {
				layer.open({
					type : 1,
					title : '学习详情记录页面',
					skin : 'layui-layer-rim', //样式类名
					anim : 2,
					area : [ '1100px', '600px' ], //宽高
					shadeClose : false, //开启遮罩关闭
					content : data
				});
			},
			error : function() {
				alert("error");
			}
		});
	}

	function hide(studyName){
	    if($('#'+studyName+'add').is(':hidden')){
            $('#show_i').removeClass('down').addClass('up');
            $('#'+studyName+'add').show();
		}else{
            $('#show_i').removeClass('up').addClass('down');
            $('#'+studyName+'add').hide();
		}

	}
	
	// function search(){
	// 	if ($('#studyName').val().match(/^[ ]*$/)) {
	// 		$('#studyName').val("")
	// 	}
	// 	if($('#studyName').val() == ""){
	// 		return
	// 	}
	//
	// 	 setTimeout(function () {
	// 		 $("#form").submit();
    //      },1000)
	//
	// }

	$("#form").keypress(function(event){
		if(event.key == "Enter")
		{
			$("#form").submit();
		}
	});
	
	/* function onKeyPress(){
		$("#form").submit();
	} */

	function sortT(way) {
		$("#way").val(way);
		$("#form").submit();
	}
</script>
</html>